<template>
  <div style="display: flex; gap: 10px;" v-loading="loading">
    <!-- 作品信息卡片 -->
    <el-card style="flex: 3;margin-bottom: 2%;">
      <el-card>
        <el-space>
          <el-button type="primary" style="margin-top: 12px" @click="createTask()">提交素描作业测评</el-button>
        </el-space>
        <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" :label-width="300">
          <!-- <el-form-item label="作业总分" prop="totalScore">
            <el-input v-model="dataForm.totalScore" placeholder="作业总分" style="max-width: 20%;" disabled></el-input>
          </el-form-item> -->
          <el-form-item label="作品主题" prop="taskName">
            <el-input v-model="dataForm.taskName" placeholder="作品主题" style="max-width: 30%;" disabled></el-input>
          </el-form-item>
          <el-form-item label="作业开始结束时间" prop="startTime">
            <el-date-picker disabled v-model="dataForm.startTime" type="datetime" placeholder="请选择作业开始时间"
              format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY"
              time-format="HH:mm" />
              <el-label style="margin-left: 1%;margin-right: 1%;">至</el-label>
              <el-date-picker disabled v-model="dataForm.endTime" type="datetime" placeholder="请选择作业结束时间"
              format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY"
              time-format="HH:mm" />
          </el-form-item>
       
          <el-form-item label="作品" prop="attachmentList">
            <ma-upload-images v-model="dataForm.attachmentList" :limit="1" height="300px"
              width="500px"></ma-upload-images>
          </el-form-item>

        </el-form>
      </el-card>
    </el-card>
    <!-- 评分要素卡片 -->
    <el-card style="flex: 2;margin-bottom: 2%;">
            <template #header>
                <span style="margin-left: 5%;">大模型得分：</span>
                <el-text class="mx-1" type="primary">{{ dataForm.aiScore || '暂无' }} / {{ dataForm.totalScore }}</el-text>
            </template>
            <!-- 分析 -->
            <el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain
                disabled>得分分析</el-button>
            <el-input v-model="dataForm.scoreAnalyse" disabled style="display: block;"
                :autosize="{ minRows: 2, maxRows: 500 }" type="textarea" />
            <template #footer>
                <el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain
                    disabled>学情分析</el-button>
                <el-input v-model="dataForm.learnAnalyse" disabled style="display: block;"
                    :autosize="{ minRows: 5, maxRows: 500 }" type="textarea" />
            </template>

        </el-card>
  </div>
  <el-card>
    <el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain disabled>评分要素</el-button>
          <el-input v-model="dataForm.scoreElement" disabled style="display: block;max-width: 100%;"
            :autosize="{ minRows: 2, maxRows: 30 }" type="textarea" placeholder="评分要素" />
  </el-card>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import { saveStuSketchTask , getStuSketchTaskDetail} from '@/api/sm/task'
const loading = ref(false)
// 获取作业数据
const router = useRouter()
const route = useRoute()
// 获取路由参数
const taskId = route.query.taskId as string
const courseClassId = route.query.courseClassId as string
// 表单校验规则
const dataRules = ref({
  taskName: [{ required: true, message: '作品主题不能为空', trigger: 'blur' }],
  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
  totalScore: [{ required: true, message: '作品总分不能为空', trigger: 'blur' }],
  aiWeight: [{ required: true, message: '大模型评估权重不能为空', trigger: 'blur' }],
  scoreElement: [{ required: true, message: '评分要素不能为空', trigger: 'blur' }],
  attachmentList: [{ required: true, message: '作品不能为空', trigger: 'blur' }],
})

// 作业表单数据
const dataForm = reactive({
  taskId: taskId,
  courseUserId: courseClassId,
  answerId: '',
  taskUserId: '',
  aiWeight: '',
  totalScore: '',
  taskName: null,
  startTime: '',
  endTime: '',
  scoreElement: '',
  topicId: '',
  taskTopicId: '',
  attachmentList: [],
  aiScore: '',
  learnAnalyse: '',
  scoreAnalyse: ''
})
// 提交修改作业
const createTask = async () => {
  try {
    loading.value = true
    const payload = {
      ...dataForm
    }
    await saveStuSketchTask (payload).then(res => {
      ElMessage.success(dataForm.taskId ? '提交素描测评成功' : '素描作业创建成功')
      getSketch()
    })
    
  } catch (e) {
    console.error("创建素描作业失败")
  }
  loading.value = false
}

const getSketch = async () => {
  await getStuSketchTaskDetail(taskId).then((res: any) => {
    dataForm.taskName = res.data.taskName
    dataForm.startTime = res.data.startTime
    dataForm.endTime = res.data.endTime
    dataForm.totalScore = res.data.totalScore
    dataForm.aiWeight = res.data.aiWeight
    dataForm.scoreElement = res.data.scoreElement
    dataForm.topicId = res.data.topicId
    dataForm.taskTopicId = res.data.taskTopicId
    dataForm.attachmentList = res.data.attachmentList
    dataForm.answerId = res.data.answerId
    dataForm.taskUserId = res.data.taskUserId
    dataForm.aiScore = res.data.aiScore
    dataForm.learnAnalyse = res.data.learnAnalyse
    dataForm.scoreAnalyse = res.data.scoreAnalyse
    dataForm.taskId = res.data.taskId
  })
}
onMounted(() => {
  if (taskId !== null && taskId !== undefined) {
    getSketch();
  }
});
</script>

<style scoped>
.el-col {
  margin-bottom: 20px;
}

.el-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>